<template>
  <div class="q-pa-md q-gutter-md" style="max-width: 350px">
    <t-toggle v-model="active" label="Active" />

    <t-list bordered separator>
      <t-item clickable v-ripple :active="active">
        <t-item-section avatar>
          <t-icon name="signal_wifi_off" />
        </t-item-section>
        <t-item-section>Active</t-item-section>
        <t-item-section side>Side</t-item-section>
      </t-item>

      <t-item clickable v-ripple :active="active" active-class="text-orange">
        <t-item-section avatar>
          <t-icon name="signal_wifi_off" />
        </t-item-section>
        <t-item-section>Active, Active class</t-item-section>
        <t-item-section side>Side</t-item-section>
      </t-item>

      <t-item
        clickable
        v-ripple
        :active="active"
        active-class="bg-teal-1 text-grey-8"
      >
        <t-item-section avatar>
          <t-icon name="signal_wifi_off" />
        </t-item-section>
        <t-item-section>Active, Active class</t-item-section>
        <t-item-section side>Side</t-item-section>
      </t-item>
    </t-list>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        active: ref(true),
      };
    },
  };
</script>
